<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/laytpl.js" type="text/javascript"></script>
    <script src="js/data_area.js" type="text/javascript"></script>
    
    <!-- script template -->
    <script id="areatmeplate" type="text/html">
        <option value>请选择</option>
        {{# for(var i = 0, len = d.length; i < len; i++){ }}
            <option value="{{ d[i].code }}" data-id="{{ d[i].id }}">{{ d[i].name }}</option>
        {{# } }}
    </script>

    <script type="text/javascript" >
        function renderAreaHtml(targetId,pid,type){
            var data = filterCityData(pid,type);
            if(data.length > 0) {
                $("#"+targetId).show();
                var tpl = document.getElementById('areatmeplate').innerHTML;
                laytpl(tpl).render(data, function(html){
                    document.getElementById(targetId).innerHTML = html;
                });
            }
        }

        function initDefaultArea(provinceCode,cityCode,countyCode){
            if(parseInt(provinceCode) > 0){
                $("select#province").val(provinceCode).trigger("change");
            }

            if(parseInt(cityCode) > 0){
                $("select#city").show();
                $("select#city").val(cityCode).trigger("change");
            }

            if(parseInt(countyCode) > 0){
                $("select#county").show();
                $("select#county").val(countyCode).trigger("change");
            }
            
        }
        
        $(function(){
            
            // 初始化省市区
            renderAreaHtml("province","1","2");
            
            $("select#province").change(function(){
                
                $("input[name='provinceName']").val($(this).find("option:selected").text());
                //判断是否有城市结点，如果没有证明只用省份
                
                if($("select#city")[0]){
                    
                    $("select#city").show();
                    
                    var provinceid = $(this).find("option:selected").attr("data-id");
                    renderAreaHtml("city",provinceid,"3");
                    $("select#county").hide();

                    $("select#city").change(function(){
                        $("input[name='cityName']").val($(this).find("option:selected").text());
                        
                        //判断是否有乡村结点，如果没有证明只用省市
                        if($("select#county")[0]){
                            
                            $("select#county").show();
  
                            
                            var cityid = $(this).find("option:selected").attr("data-id");
                            renderAreaHtml("county",cityid,"4");
                            $("select#county").change(function(){
                                $("input[name='countyName']").val($(this).find("option:selected").text());
                            });
                        }
                        
                    });
                }
                
                
            });
            
            //注意事项：如果回显值需要在页面上对  provinceCode cityCode countyCode 进行相应的赋值
            
            initDefaultArea('110000','110100','110105');
            //initDefaultArea('110000','110100');
            
        });
        
    </script>

    
</head>
<body>
    省<select name="province" id="province"></select>
    <input type="hidden" name="provinceName">
    市<select name="city" id="city" style="display: none"></select>
    <input type="hidden" name="cityName">
    区<select name="county" id="county" style="display: none"></select>
    <input type="hidden" name="countyName">

</body>
</html>